import React, { useState } from 'react';
import { Button, Card, Col, Collapse, Descriptions, List, Row, Space, Typography } from 'antd';
import { GithubOutlined } from '@ant-design/icons';
import Eraser from '@/components/Eraser';
import IconFont from '@/components/IconFont';
import styles from './index.less';

const { Panel } = Collapse;
const { Text, Link, Title, Paragraph } = Typography;

const Home = () => {
  const [logList] = useState([
    {
      version: 'v1.1.0',
      datetime: '2023-11-20',
      content: ['添加区域管理功能；', '修复一些bug。'],
    },
    {
      version: 'v1.1.3',
      datetime: '2023-12-20',
      content: ['智慧商城完成主体。'],
    },
    {
      version: 'v1.2.0',
      datetime: '2024-02-01',
      content: ['创建商家模块。'],
    },
    {
      version: 'v1.3.0',
      datetime: '2024-03-22',
      content: ['商家权限开发功能。'],
    },
  ]);
  const [backendList] = useState(['nodejs', 'express', 'JWT', 'postgresql', 'sequelize']);
  const [frontendList] = useState(['React', 'Ant Design', 'Umi', 'Less', 'dva']);
  return (
    <div className={styles.container}>
      <Row gutter={16}>
        <Col xs={24} sm={24} md={24} lg={16} xl={16}>
          <Card title={<Title level={3}>智慧商城后台管理</Title>}>
            <Typography>
              <Paragraph>
                {/* 初入行时，祖师爷“高司令”赏饭吃，一直想写套后台管理系统报答。怎奈学艺不精，丢了祖师爷的脸，此为心结。
                后来转投布兰登大师门下，与后台同事配合工作，想趁工作不忙时提前把后台管理的工作先弄起来，谁知半年过去了，同事都没有提供一个接口，然后我就亲自下场了。
                这便有了它。 */}
                管理员系统所需环境：nodejs 12+
                毕业设计-智慧商城后台管理，需用管理员和商家账号登录系统。模块包括：商品管理，商家管理，用户管理。商品管理可以控制
                商品的增删改查，其他的模块同理，商品管理中能检查库存情况。
              </Paragraph>
              <Paragraph>
                <Text strong>当前版本：{logList[0].version}</Text>
              </Paragraph>
              <Paragraph>
                <Button icon={<GithubOutlined />}>
                  <span>
                    <Link href="https://github.com/hankaibo/amy-java/" target="_blank">
                      后台源码
                    </Link>
                  </span>
                </Button>
                <Button icon={<GithubOutlined />}>
                  <span>
                    <Link href="https://github.com/hankaibo/amy-react/" target="_blank">
                      前端源码
                    </Link>
                  </span>
                </Button>
              </Paragraph>
            </Typography>
          </Card>
        </Col>
        <Col xs={24} sm={24} md={24} lg={8} xl={8}>
          <Card title={<Title level={3}>技术选型</Title>}>
            <Space>
              <List
                size="small"
                header={<Text strong>前端技术</Text>}
                dataSource={frontendList}
                renderItem={(item) => <List.Item>{item}</List.Item>}
              />
              <List
                size="small"
                header={<Text strong>后台技术</Text>}
                dataSource={backendList}
                renderItem={(item) => <List.Item>{item}</List.Item>}
              />
            </Space>
          </Card>
        </Col>
      </Row>
      <Row gutter={16}>
        <Col xs={24} sm={24} md={24} lg={12} xl={8}>
          <Card title="联系信息">
            <Descriptions column={1} size="small">
              <Descriptions.Item
                label={
                  <>
                    <GithubOutlined style={{ fontSize: '12px', marginRight: '8px' }} />
                    <Text>学校</Text>
                  </>
                }
              >
                河北地质大学华信学院
              </Descriptions.Item>
              <Descriptions.Item
                label={
                  <>
                    <GithubOutlined style={{ fontSize: '12px', marginRight: '8px' }} />
                    <Text>专业</Text>
                  </>
                }
              >
                {/* <Link href="https://github.com/hankaibo/amy-java/issues" target="_blank">
                  https://github.com/hankaibo/amy-java/issues
                </Link> */}
                软件工程专业
              </Descriptions.Item>
            </Descriptions>
          </Card>
        </Col>
        <Col xs={24} sm={24} md={24} lg={12} xl={8}>
          <Card title="更新日志">
            <Collapse ghost>
              {logList.map((item) => (
                <Panel
                  header={
                    <Text>
                      {item.version} - {item.datetime}
                    </Text>
                  }
                  key={item.datetime}
                >
                  <List
                    style={{ paddingLeft: '24px' }}
                    size="small"
                    dataSource={item.content}
                    renderItem={(it, idx) => (
                      <List.Item>
                        {idx + 1}. {it}
                      </List.Item>
                    )}
                  />
                </Panel>
              ))}
            </Collapse>
          </Card>
        </Col>
        {/* <Col xs={24} sm={24} md={24} lg={12} xl={8}> */}
        {/* <Card title="捐赠支持"> */}
        {/* <Space> */}
        {/* eslint-disable-next-line global-require */}
        {/* <Eraser width={190} height={251} qrSrc={require('@/assets/alipay-qr-code.jpg')} /> */}
        {/* eslint-disable-next-line global-require */}
        {/* <Eraser width={190} height={251} qrSrc={require('@/assets/wechat-qr-code.jpg')} /> */}
        {/* </Space> */}
        {/* </Card> */}
        {/* </Col> */}
      </Row>
    </div>
  );
};

export default Home;
